<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-form
        :model="form"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="on
        "
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item label="角色名" name="name" :rules="[{ required: true, message: 'Please input your username!' }]">
          <a-input v-model="form.name" />
        </a-form-item>
        <a-tree
          :selectedKeys="selectedKeys"
          :checkedKeys="checkedKeys"
          default-expand-all
          checkable
          :height="233"
          :tree-data="treeData"
        ></a-tree>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { permission, permissionGetAll, permissionUpdate } from '@/api/role'

export default {
  name: 'roleHandle',

  data() {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 },
      },
    }
    return {
      visible: false,
      form: {
        name: '',
      },
      selectedKeys: [],
      checkedKeys: [],
      treeData: [],
    }
  },
  created() {
    // this.getList()
    // getRoleList({ t: new Date() })
    this.getAllPermission()
  },
  methods: {
    eachTree(a_list,permissions){
      let treeData = {}
      a_list.forEach(v=>{
        treeData = { title: v.name, key: v.id }
        if(v.permissions && v.permissions.length>0){
          treeData.children = []
          this.eachTree(v.permissions, treeData.children)
        }
        permissions.push(treeData)
      })
    },
    onFinish() {},
    onFinishFailed() {},
    getAllPermission() {
      permissionGetAll().then((res) => {
        let list = []
        this.eachTree(res.data, list)
        this.treeData = list;

      })
    },
    getPermission() {},
  },
}
</script>

 